<style lang="scss" scoped>
</style>
<template>
  <div class="content">
    <div class="hy-search-bar2" style="height: auto;margin-left: -25px;">
      <Form label-position="right" inline :label-width="100">
        <FormItem label="请选择车辆">
          <Select placeholder="VIN码" v-model="searchData.vin" filterable remote clearable :loading="selectLoading">
            <!--<Option v-for="(option, index) in selectArrayList.carList" :value="option.label" :key="index">{{option.label}}</Option>-->
          </Select>
        </FormItem>
        <FormItem label="选择日期和时间">
          <DatePicker type="datetimerange" placement="bottom-start" confirm placeholder="选择日期和时间" clearable
                      style="width: 300px" v-model="selectTimeRange" :editable="false"
                      format="yyyy-MM-dd hh:mm:ss"></DatePicker>
        </FormItem>
        <i-button type="success" icon="ios-search" @click="searchReport" shape="circle"
                  style="margin-left: 10px;margin-top: 1px" :loading="btnLoading">搜索
        </i-button>
        <!--<i-button type="ghost" @click="" shape="circle"-->
                  <!--style="margin-left: 10px;margin-top: 1px" :loading="btnLoading">导出-->
        <!--</i-button>-->
      </Form>
    </div>
    <!--工具条部分-->
    <div class="hy-tool-bar">
    </div>
    <div style="min-width: 950px" v-show="showReportWindow">
      <div style="float: left">
        <Menu theme="light" active-name="busVoltage" style="width:200px" @on-select="clickTitle">
          <MenuItem v-for="item in menuList" :name="item.key" :key="item.key">{{item.title}}</MenuItem>
        </Menu>
      </div>
      <div id="reportShow" name="reportShow" style="width: 700px;height: 500px;float: left;margin-left: 10px"></div>
    </div>
  </div>
</template>
<script>
    import echarts from 'echarts';
    // import service from './service';

  export default {
    data () {
      return {
        selectLoading: false,
        btnLoading: false,
        searchData: {
            vin: ''
        },
        selectTimeRange: [],
        menuList: [
          {
            title: '行程里程',
            xTitle: '行程时间',
            yTitle: '里程（km）',
            key: 'mileage'
          },
          {
            title: '最高车速',
            xTitle: '时间',
            yTitle: '车速（km/h）',
            key: 'maxSpeed'
          },
          {
            title: '平均车速',
            xTitle: '时间',
            yTitle: '车速（km/h）',
            key: 'avgSpeed'
          },
          {
            title: '平均油耗',
            xTitle: '时间',
            yTitle: '油耗(L/100km)',
            key: 'avgFuel'
          },
          {
            title: '急加速次数',
            xTitle: '时间',
            yTitle: '次数',
            key: 'rapidAcceleration'
          },
          {
            title: '急减速次数',
            xTitle: '时间',
            yTitle: '次数',
            key: 'sharpSlowdown'
          },
          {
            title: '急转弯次数',
            xTitle: '时间',
            yTitle: '次数',
            key: 'sharpTurn'
          }
        ],
        reportShow: null,
        currentMenu: '',
        showReportWindow: false,
        baseOption: {
          title: {
            text: '',
            textStyle: {
              color: 'rgb(96, 125, 139)',
              fontSize: 16
            },
            padding: [10, 10],
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              animation: false,
              label: {
                backgroundColor: '#505765'
              }
            }
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              start: 5,
              end: 85
            },
            {
              type: 'inside',
              realtime: true,
              start: 5,
              end: 85
            }
          ],
          xAxis: [
            {
              type: 'category',
              name: '',
              axisTick: {
                alignWithLabel: true
              },
              data: []
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              formatter: '{value}'
            }
          ],
          series: [
            {
              name: '',
              type: 'line',
              symbol: 'none',
              data: []
            }
          ]
        }
      };
    },
    methods: {
      searchReport () {
        if (!this.searchData.vin) {
          this.$Notice.info({title: '请选择车辆'});
        } else if (!(this.selectTimeRange.length > 0 && this.selectTimeRange[0])) {
          this.$Notice.info({title: '请选择时间'});
        } else {
          this.searchData.startTime = this._hyTool.DateFormat(new Date(this.selectTimeRange[0]), 'yyyy-MM-dd hh:mm:ss');
          this.searchData.endTime = this._hyTool.DateFormat(new Date(this.selectTimeRange[1]), 'yyyy-MM-dd hh:mm:ss');
          this.showReportWindow = true;
        }
      },
      // 点击分析数据
      clickTitle (data) {
        let selectMenu = null;
        this.menuList.forEach(item => {
            if (item.key === data) {
              selectMenu = item;
            }
        });
        this.clearReport();
        this.getHistoryData(data, selectMenu);
      },
      // 获取数据
      getHistoryData (type, optionData) {
        // // 重新查询清空所有报表
        // let result = await getHistoryData({type: type}, this.searchData);
        // let temp = result.data;
        // await this.drawDiagram(temp, optionData);
      },
      // 绘制折线图
      drawDiagram (data, optionData) {
        if (!this.reportShow) {
          let reportShowOption = Object.assign({}, this.baseOption);
          reportShowOption.title.text = optionData.title;
          reportShowOption.xAxis[0].name = optionData.xTitle;
          reportShowOption.yAxis[0].name = optionData.yTitle;
          reportShowOption.series[0].name = optionData.yTitle;
          this.reportShow = echarts.init(document.getElementById('reportShow'));
          this.reportShow.showLoading();
          let value = [];
          let date = [];
          data.forEach(item => {
            date.push(item.startTime);
            value.push(item.usage);
          });
          reportShowOption.series[0].data = value;
          reportShowOption.xAxis[0].data = date;
          this.reportShow.hideLoading();
          this.reportShow.setOption(reportShowOption);
        }
      },
      clearReport () {
        if (this.reportShow) {
          this.reportShow.dispose();
          this.reportShow = null;
        }
      },
      charngeWidth () {
        if (this.reportShow) {
          this.reportShow.resize();
        }
      }
    },
    mounted () {
      // 屏幕大小改变的时候改变 echarts图表的大小
      window.onresize = () => {
        this.charngeWidth();
      };
    }
  };
</script>
